import React, { useState } from 'react';
import { Button} from 'antd';
const Top = (props) => {
    // 全屏展示
    const [full, setFull] = useState(false);    //创建管理是否全屏状态
    const [scre, setScre] = useState('全屏');   //按钮文字
    
    let fullScreenHandle = () => {
      let app = document.querySelector('.full-screen')//获取App
      if (!full) {
        setScre('退出全屏')
        setFull(true);
        app.requestFullscreen()   //实现全屏
      } else {
        setScre('全屏')
        setFull(false);
        document.exitFullscreen(); //退出全屏
      }
    }
    return (
        <div className="top">
            {/* <Button
                className="screen"
                onClick={() => { fullScreenHandle() }}
            >
                {scre}
            </Button> */}
            <div className='full-screen' style={{backgroundColor: 'pink'}} onDoubleClick={fullScreenHandle}>1111122</div>
        </div>

    );
}
export default Top;
 